<template>
    <table class="table table-hover grid-table" v-if="list">
        <tbody>
        <tr>
            <th width="40px;">
                            <span class="file-select-all">
                            <input type="checkbox" value=""/>
                            </span>
            </th>
            <th>文件名</th>
            <th></th>
            <th width="200px;">创建时间</th>
            <th width="100px;">大小</th>
        </tr>
        <tr v-for="($item ,index) in list" :key="index">
            <td style="padding-top: 15px;">
                            <span class="file-select">
                            <input type="checkbox" :value="$item['name']"/>
                            </span>
            </td>
            <td>
                <div style="float:left;" @click.prevent.stop="mapToListClick($item)" v-html="$item['preview']"></div>

                <a class="file-name"
                   @click.prevent.stop="mapToListClick($item)"
                   :title="$item['name']">
                    {{ $item['icon'] }} {{ $item['basename'] }}
                </a>
            </td>

            <td class="action-row">
                <div class="btn-group btn-group-xs ">
                    <a class="btn btn-default file-rename"
                       v-if="canEdit"
                       @click.prevent="mapRenameOrMove($item)">
                        <i class="fa fa-edit"></i>
                    </a>
                    <a v-if="canDelete"
                       class="btn btn-default file-delete"
                       @click.prevent="handleDelete($item['name'])">
                        <i class="fa fa-trash"></i>
                    </a>
                    <a v-if="!$item['isDir']"
                       :href="`/api/media/download?file=${$item['name']}`"
                       target="_blank"
                       class="btn btn-default">
                        <i class="fa fa-download"></i>
                    </a>
                </div>

            </td>
            <td>{{ $item['time'] }}&nbsp;</td>
            <td>{{ $item['size'] }}&nbsp;</td>
        </tr>
        </tbody>
    </table>
</template>

<script>

    export default {
        name   : "media-grid-table",
        props  : [ 'list', 'canDelete', 'canUpload', 'canEdit' ],
        data() {
            return {};
        },
        mounted() {
            $('.grid-table .file-select input').iCheck({ checkboxClass: 'icheckbox_minimal-blue' })
                                               .on('ifChanged', function () {
                                                   if (this.checked) {
                                                       $(this).closest('tr').css('background-color', '#ffffd5');
                                                   } else {
                                                       $(this).closest('tr').css('background-color', '');
                                                   }
                                               });

            $('.grid-table .file-select-all input').iCheck({ checkboxClass: 'icheckbox_minimal-blue' })
                                                   .on('ifChanged', function () {
                                                       if (this.checked) {
                                                           $('.file-select input').iCheck('check');
                                                       } else {
                                                           $('.file-select input').iCheck('uncheck');
                                                       }
                                                   });
        },
        methods: {

            mapToListClick(item) {
                this.$emit('listClick', item);
            },
            mapRenameOrMove(item) {
                this.$emit('renameOrMove', item);
            },
            handleDelete(file) {
                this.$emit('deleteFile', file)
            }
        },
    }
</script>

<style lang="less">
    .grid-table {
        & > li {
            float: left;
            width: 150px;
            border: 1px solid #eee;
            margin-bottom: 10px;
            margin-right: 10px;
            position: relative;
        }

        .btn-group {
            display: none;
        }

        tr:hover {
            .btn-group {
                display: block;
            }
        }

        .file-icon {
            text-align: left;
            font-size: 25px;
            color: #666;
            display: block;
            float: left;
        }

        .action-row {
            text-align: center;
        }

        .file-name {
            font-weight: bold;
            color: #666;
            display: block;
            overflow: hidden !important;
            white-space: nowrap !important;
            text-overflow: ellipsis !important;
            float: left;
            margin: 7px 0px 0px 10px;
        }

        .file-icon.has-img > img {
            max-width: 100%;
            height: auto;
            max-height: 30px;
        }
    }

</style>
